<template>
  <!-- 我的 -->
  <view class="container">

    <cunstom_navigation_bar :propStyles="propStyles">
    </cunstom_navigation_bar>
    <view class="contentBox">
      <view class="personalInfo">
        <view class="info">
          <view class="headPortrait">
            <image class="photo" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/headportrait.png">

            </image>
            <image class="edit" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/editIcon.png">

            </image>
          </view>
          <view class="nameNadd">
            <view class="name">英明的通天教主</view>
            <view class="addr">新疆维吾尔自治区...</view>
          </view>
          <view class="register">
            <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/register.png">

            </image>
          </view>
        </view>
        <view class="data">
          <view class="dataBox"  @tap="jumpTo('/page_myBalance/myBalance')">
            <view class="num">257.75</view>
            <view class="txt">余额</view>
          </view>
          <view class="dataBox">
            <view class="num">125</view>
            <view class="txt center">积分</view>
          </view>
          <view class="dataBox">
            <view class="num">5</view>
            <view class="txt">优惠卷</view>
          </view>
        </view>
      </view>
      <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/bar.png">

      </image>
      <view class="orderBox">
        <view class="head">
          我的订单
        </view>
        <view class="content">
          <view class="itemBox" @tap="jumpTo('/page_myOrder/myOrder')">
            <view class="left">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/order1.png"></image>
              <view>商城订单</view>

            </view>

          </view>
          <view class="itemBox"@tap="jumpTo('/page_myOrder/myOrder')">
            <view class="left">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/order2.png"></image>
              <view>无人柜订单</view>

            </view>

          </view>
          <view class="itemBox" @tap="jumpTo('/page_myOrder/myOrder')">
            <view class="left">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/order3.png"></image>
              <view>厨娘订单</view>

            </view>

          </view>
          <view class="itemBox" @tap="jumpTo('/page_myOrder/myOrder')">
            <view class="left">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/order4.png"></image>
              <view>全部</view>

            </view>

          </view>
        </view>

      </view>
      <view class="navBar" @tap="jumpTo('/page_recharge/recharge',false,false)">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar1.png"></image>
          <text>充值入口</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="jumpTo()">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar2.png"></image>
          <text>积分中心</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="joinCn">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar3.png"></image>
          <text>申请成为厨娘</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="jumpTo()">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar4.png"></image>
          <text>收藏</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="jumpTo('/page_myAddress/myAddress',false,false)">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar5.png"></image>
          <text>地址</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="jumpTo()">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar6.png"></image>
          <text>意见反馈</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
      <view class="navBar" @tap="jumpTo()">
        <view class="left">
          <image class="bar" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/navbar7.png"></image>
          <text>设置</text>
        </view>
        <view class="right">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/rightIcon.png"></image>
        </view>
      </view>
    </view>
    <view class="zhanwei"></view>
    <tab_bar :current-page="4" ref='tabBar'></tab_bar>
  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();

  // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
  export default {
    data() {
      return {
        couponInfo: {},// 优惠券信息
        picData: [],
        codeId: '',
        openId: '',
        avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
        hasLogin: false,
        indicatorDots: false,
        swiperSrc: '',
        swiperSrc1: '',
        swiperSrc2: '',
        swiperSrc3: '',
        swiperSrc11: '',
        swiperSrc22: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner2.gif',
        swiperSrc33: '',
        interval: 8000,
        duration: 1000,
        autoplay: true,

        imgUrl: '',
        productData: [],
        queryParams: {
          "modulesId": '', //模块id
          "mallProductName": '', //商品名称
          "pageNum": 1, //页数
          "pageSize": 200 //每页数量
        },
        propStyles: {
          // scan: true
          iconSrc: 'add',
          zhanweiColor: '#FFFFFF',
          txtColor: '#333333',
          bgColor: '#FFFFFF',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        }

      };
    },

    methods: {
      closeInvitate() {
        this.$refs.popUpCoupon.close();
      },

      // 是否可以领证 0否 1是
      receiveStatus(status) {
        if (status == 1) {
          return '可领证'
        }
        // else if (status == 3) {
        //   return '已领证'
        // }
      },
      jumpTo(url, isTabPage, mustLogin) {
        console.log('首页手机号~~', app.globalData.phone);
        if (mustLogin && !app.globalData.phone) {
          //去登录授权
          uni.navigateTo({
            url: `/page_login/login?from=myInfo`,
          })
          return
        }
        if (!url) {
          util.toast('敬请期待~')
          return
        }
        console.log('1111');
        if (isTabPage) {
          console.log('2222');
          uni.switchTab({
            url: `${url}`,
          })
        } else {
          console.log('333');
          uni.navigateTo({
            url: `${url}`
          })
        }

      },

      getTopicPic() {

        util.request(api.selectTopicPic,
          { type: 1 }

          , 'GET', 'application/json').then(res => {

            if (res.code == 200) {
              this.picData = res.data
              console.log('this.picData.length~~', this.picData.length);

              if (this.picData.length > 1) {
                this.indicatorDots = true
              }




            } else {

              util.toast('查询失败')
            }

          }).catch((err) => {
            console.log('err', err)

          });

      },
      getProductList() {

        util.request(api.productList,
          this.queryParams

          , 'GET', 'application/json').then(res => {

            if (res.code == 200) {
              this.productData = res.rows
              // this.showData = res.data; 

            } else {

              util.toast('查询失败')
            }

          }).catch((err) => {
            console.log('err', err)

          });

      },
      jumpUrl(e) {
        if (e == '21') {
          uni.navigateTo({
            url: `/page_artExhibition/artExhibition`,
          });
        } else if (e == '11') {
          // uni.navigateTo({
          //         url: `/page_login/login`,
          //       })
          uni.switchTab({
            url: '/pages/robot/robot',
          })

        } else if (e == '11') {

          uni.switchTab({
            url: '/pages/robot/robot',
          })

        } else if (e == '31') {
          uni.navigateTo({
            url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao1=true`,
          });
          // url: `/page_webView/webView?url=https://im.huizhihuyuai.com/chatPage&${key}=true`,
        } else if (e == '32') {
          uni.navigateTo({
            url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao2=true`,
          });

        } else if (e == '41') {
          uni.navigateTo({
            url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao6=true`,
          });

        } else if (e == '42') {
          uni.navigateTo({
            url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao7=true`,
          });

        } else if (e == '22') {

          uni.navigateTo({
            // url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao3=true`,
            url: '/page_digitalHuman/digitalHuman',
          });

        }

      },




      animationfinish(e) {

        let getTimestamp = new Date().getTime();
        if (e.detail.current == 0) {
          this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
        } else if (e.detail.current == 1) {
          this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
        } else if (e.detail.current == 2) {
          this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
          this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
        }
      },
      nextStep: function () {
        if (this.hasLogin) {
          //扫码
          this.scanFun()
        } else {
          uni.navigateTo({
            url: `/page_login/login`,
          })
        }

      },
      loginByWeixin: function () {
        var that = this;
        let code = null;
        console.log('登录信息~~~111');
        return new Promise(function (resolve, reject) {
          return util.login().then((res) => {
            code = res.code;
          }).then(() => {
            util.request(api.AuthLoginByWeixin, {
              appid: 'wx3a64d38adf2dfc10',
              code: code
            }, 'GET', 'application/json').then(res => {
              if (res.code === 200) {
                //存储用户信息
                that.openId = res.data.openid;
                app.globalData.openId = res.data.openid;
                that.queryUserinfo()

                resolve(res);
              } else {
                reject(res);
              }
            }).catch((err) => {
              reject(err);
            });
          }).catch((err) => {
            reject(err);
          })
        });
      },
      queryUserinfo() {

        util.request(api.GetUserInfo, {

          openId: this.openId
        }, 'GET', 'application/json').then(res => {
          console.log('查询用户信息~~~111', res.code);
          if (res.code === 200) {

            if (res.data) {

              app.globalData.userInfo.avatarUrl = res.data.headPicture;
              app.globalData.userInfo.nickName = res.data.nickName;
              app.globalData.companyName = res.data.orgName;
              app.globalData.code = res.data.code;
              console.log('查询用户信息~~~222', res.data.phone);
              app.globalData.phone = res.data.phone;
              // app.globalData.token = res.data.token;
              app.globalData.artistState = res.data.artistState;
              app.globalData.artistId = res.data.artistId;
              util.setUserInfo(res.data.phone, res.data.token)
              console.log('首页设置昵称头像', app.globalData.userInfo.nickName, app.globalData.userInfo.avatarUrl, res.data.nickName)
              this.hasLogin = true;
              uni.$emit('login', {

              });
              if (this.codeId) {
                console.log('this.codeId~~222', this.codeId)
                this.queryHandle(this.codeId)
              }

            } else {

              this.hasLogin = false;
              if (this.codeId) {
                uni.navigateTo({
                  url: `/page_login/login`,
                })
              }

            }

            resolve(res);
          } else {

            app.globalData.userInfo.avatarUrl = this.avatarUrl;
            app.globalData.userInfo.nickName = '设置昵称';
            app.globalData.userInfo.userName = '点击去登录';
            app.globalData.companyName = '';
            app.globalData.code = '';
            util.toast('网络异常，请重试')
            reject(res);
          }
        }).catch((err) => {

        });

      },
      queryHandle(code) {
        console.log('标识解析~', code)
        util.request(api.QuewryHandles, {
          handle: code,
        }, 'GET', 'application/json').then(res => {

          if (res.code == 200) {
            uni.navigateTo({
              url: `/page_certificate/certificate?code=${code}`,
            })

          } else {
            util.toast(res.msg)

          }

        }).catch((err) => {
          console.log('err', err)

        });
      },
      scanFun() {
        const that = this
        uni.scanCode({
          success: function (res) {
            const qrUrl = decodeURIComponent(res.result);
            console.log('条码类型：' + res.result);
            console.log('qrUrl:' + qrUrl);
            let code = qrUrl.split('code=')[1];
            console.log(typeof code, code)
            that.queryHandle(code)
 

          }
        });
      },
	 joinCn(){
		 if(app.globalData.user.cook_info){
			uni.navigateTo({
				url: `/page_cookSide/cookSide`,
			})  
			 
		 }else{
			uni.navigateTo({
				url: `/page_registerCook/registerCook` ,
			})  
			 
		 }
		 
		 
	 }


    },



    mounted() {


    },
    created() {

    },
    onLoad: function (option) {





      this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'





    },
    onUnload() {

    },
    onShow: function () {
      uni.hideTabBar()
      this.$refs.tabBar.changeCurrentPage(4)
    },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background-color: #F8F8F8 !important;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #F8F8F8 !important;
  }

  .container {
    /* height: 100%;
    width: 100%; */

  }

  .contentBox {
    display: flex;
    padding: 0rpx 30rpx;
    align-items: center;
    flex-direction: column;

    .personalInfo {
      width: 690rpx;

      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .info {
        display: flex;
        align-items: center;

        .headPortrait {
          margin-left: 24rpx;
          margin-right: 68rpx;
          width: 168rpx;
          height: 164rpx;
          position: relative;

          .photo {
            width: 168rpx;
            height: 164rpx;
          }

          .edit {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            bottom: 0rpx;
            right: 0rpx;
          }
        }

        .nameNadd {
          margin-right: 84rpx;

          .name {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            width: 226rpx;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-bottom: 15rpx;
          }

          .addr {
            font-weight: 400;
            width: 178rpx;
            font-size: 20rpx;
            color: #8A8A8E;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

        }

        .register {
          image {
            width: 128rpx;
            height: 60rpx;
          }
        }

      }

      .data {
        width: 100%;
        display: flex;
        height: 202rpx;

        .dataBox {
          width: 33%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

          .num {
            font-weight: 900;
            font-size: 32rpx;
            color: rgba(51, 51, 51, 0.8);
            margin-bottom: 24rpx;
          }

          .txt {
            font-weight: 500;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.6);
          }

          .center {
            border-left: 1rpx solid #ccc;
            width: 100%;
            text-align: center;
            border-right: 1rpx solid #ccc;
          }
        }
      }
    }

    .bar {
      width: 690rpx;
      height: 274rpx;
      margin-top: 14rpx;
      margin-bottom: 18rpx;
    }

    .orderBox {
      width: 690rpx;
      height: 260rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 38rpx 0rpx 30rpx 0rpx;
      margin-bottom: 24rpx;

      .head {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        padding-left: 28rpx;
      }

      .content {
        display: flex;
        justify-content: space-between;
        padding: 0rpx 60rpx;
        margin-top: 30rpx;

        .itemBox {
          image {
            width: 78rpx;
            height: 76rpx;
            margin-bottom: 18rpx;
          }

          .left {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          view {
            font-weight: 500;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
          }
        }
      }
    }

    .navBar {
      width: 690rpx;
      height: 112rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-bottom: 12rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 36rpx;
      padding-right: 4rpx;

      .left {
        display: flex;
        align-items: center;

        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 16rpx;
        }

        text {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
        }
      }

      .right {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .zhanwei {
    width: 750rpx;
    height: 170rpx;
    background: #F4F4F2;
  }

  .popUpCoupon {
    .popBox {
      display: flex;
      justify-content: center;
      align-content: center;

      image {
        /* width: 350rpx;
        height: 369rpx; */
        width: 595rpx;
        height: 627.3rpx;
      }

      .couponImg {
        width: 698rpx;
        height: 736rpx;
        background-position: center;
        background-size: cover;
      }

      .h1,
      .h3,
      .h4,
      .h5 {
        text-align: center;
        width: 100%;
      }

      .h1 {
        margin-top: 237rpx;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #E38F5A;

      }

      .h2 {
        display: flex;
        margin-top: 60rpx;
        justify-content: center;
        align-items: baseline;

        .icon {
          font-weight: 600;
          font-size: 50rpx;
          color: #FDCA9F;

        }

        .num {
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 90rpx;
          color: #FDCA9F;
          line-height: 27rpx;

        }
      }

      .h3 {
        margin-top: 60rpx;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 7rpx;
      }

      .h4 {
        margin-top: 30rpx;
      }

      .h5 {
        margin-top: 10rpx;
      }

      .h4,
      .h5 {
        font-weight: 400;
        font-size: 22rpx;
        color: #FFFFFF;
      }

      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .btn {
          width: 342rpx;
          height: 66rpx;
        }
      }


    }

    .closeBox {
      width: 626rpx;
      height: 75rpx;

      .closeBtn {
        position: absolute;
        top: 90rpx;
        right: 20rpx;
        width: 40rpx;
        height: 40rpx;

      }
    }


    .saveBtnBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 66rpx;
    }

    .saveBtn {
      width: 620rpx;
      height: 88rpx;
      background: #84240E;
      border-radius: 10rpx;
      font-size: 36rpx;
      font-family: SourceHanSerifCN-Heavy, SourceHanSerifCN;
      font-weight: 800;
      color: #FAF3DB;
      line-height: 88rpx;
      letter-spacing: 6px;
      text-align: center;
    }

  }
</style>